<template>
  <base-dialog
    :visible.sync="dialogVisible"
    :title="titleMap[dialogStatus]"
    width="30%"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item v-if="hasParent" label="上级菜单:">
        <span>{{ parentName }}</span>
      </el-form-item>
      <el-form-item label="菜单标题:" prop="title">
        <el-input v-model="form.title" placeholder="输入标题" />
      </el-form-item>
      <el-form-item label="菜单名称:">
        <el-input v-model="form.name" placeholder="输入菜单名称" />
      </el-form-item>
      <el-form-item label="菜单链接:" prop="path">
        <el-input v-model="form.path" placeholder="输入菜单链接" />
      </el-form-item>
      <el-form-item label="重定向链接:">
        <el-input v-model="form.redirect" placeholder="输入重定向链接" />
      </el-form-item>
      <el-form-item label="组件名称:" prop="component">
        <el-input
          v-model="form.component"
          placeholder="输入菜单对应的文件路径"
        />
      </el-form-item>
      <el-form-item label="菜单图标:">
        <el-select
          v-model="form.icon"
          placeholder="请选择图标"
          style="width:200px"
          clearable
        >
          <el-option
            v-for="item in elIconList"
            :key="item.name"
            :value="item.name"
            :label="item.name"
          >
            <i :class="item.name" />
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.name
            }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="显示顺序:">
        <el-input-number v-model="form.displayOrder" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否隐藏:">
        <el-radio-group v-model="form.hidden">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否一直显示:">
        <el-radio-group v-model="form.alwaysShow">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示面包屑:">
        <el-radio-group v-model="form.breadcrumb">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </div>
  </base-dialog>
</template>
<script>
export default {
  name: "ModifiyMenu",
  data() {
    return {
      dialogVisible: false,
      titleMap: { create: "创建", edit: "编辑" },
      dialogStatus: "create",
      hasParent: false,
      parentName: "",
      elIconList: [],
      form: {
        parentId: 0,
        title: "",
        name: "",
        path: "",
        redirect: "",
        component: "",
        icon: "",
        displayOrder: "",
        status: 1, // 1启用 0 禁用
        hidden: 1, // 1 显示 0 隐藏
        alwaysShow: 1, // 1 true 0 false
        breadcrumb: 1, // 1 true, 0 false
        systemSource: 0 // 系统来源
      },
      rules: {
        title: [
          { required: true, message: "菜单标题不得为空", trigger: "blur" }
        ],
        path: [
          { required: true, message: "菜单链接不得为空", trigger: "blur" }
        ],
        component: [
          { required: true, message: "菜单文件路径不得为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    open(type, parent) {
      if (type === 1) {
        // 新增第一级
        this.hasParent = false;
        this.resetForm();
      } else if (type === 2) {
        // 添加下一级
        this.hasParent = true;
        this.resetForm();
        if (parent) {
          this.form.parentId = parent.menuId;
          this.parentName = parent.title;
        }
      } else if (type === 3) {
        // 编辑
        if (parent) {
          if (parent.parentId) {
            this.hasParent = true;
            this.parentName = parent.parentName;
          }
          this.form = Object.assign({}, parent, { menuId: parent.menuId });
        }
      }
      this.getIconList();
      this.dialogVisible = true;
    },
    async getIconList() {
      let res = await this.$api.sys_dict.listFromCacheByCode("element_icon");
      this.elIconList = res.data;
    },
    handleSave() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.form.systemSource = 0;
          let res = await this.$api.sys_menu[
            this.form.menuId ? "update" : "add"
          ](this.form);
          this.submitOk(res.msg);
          this.$emit("handleSucc");
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        parentId: 0,
        title: "",
        name: "",
        path: "",
        redirect: "",
        component: "",
        icon: "",
        displayOrder: "",
        status: 1, // 1启用 0 禁用
        hidden: 1, // 1 显示 0 隐藏
        alwaysShow: 1, // 1 true 0 false
        breadcrumb: 1 // 1 true, 0 false
      };
    },
    handleClose() {}
  }
};
</script>
<style lang="scss" scoped></style>
